<template>
	<view class="body">
		<myHeader :title="title"></myHeader>
		<view class="mt-20 p-20">
			<uni-forms-item label="任务总结">
				<uni-easyinput required="true" type="textarea" v-model="taskContent" placeholder="请输入任务总结" />
			</uni-forms-item>
		</view>
		<view class="mt-20 p-20">
			<uni-forms-item label="上传文件">
				<uni-grid :column="6" class="files"  :showBorder="false"  :square="false" >
					<uni-grid-item class="header" >
						<button @click="chooseImg" class="headerbutton">+</button>
					</uni-grid-item>
					<uni-grid-item class="content" v-for="(item,key) in filesupload" :key="key">
						<view >
							<image :src="item.url.replace('http://112.124.6.140:8090','/api')" mode=""></image>
							
							<span style="float: right;" 
								@click.stop="filesupload.splice(key,1)"> ×</span>
						</view>
					</uni-grid-item>
				</uni-grid>
			</uni-forms-item>
			
			<button class="mtb-20 bg-red text-white" :disabled="disable" @click="submitForm">提交</button>
		</view>
	</view>
</template>

<script>
	import {executeTask} from '@/api/api_party_task.js'
	import myHeader from '../components/head.vue'
	export default {
		data() {
			return {
				imgNumber:5,//文件数量
				taskContent: '',
				title: '上传任务报告',
				imageValue: [],
				meetingTaskId: '',
				imgDate:[],
				filesupload:[],
				disable:false
			}
		},
		onLoad(ars) {
			this.meetingTaskId = Number.parseInt(ars.meetingTaskId)
			console.log(this.meetingTaskId)
		},
		methods: {
			submitForm() {
				if(this.taskContent.length===0||this.filesupload.length===0){
					uni.showToast({
						title:'请输入任务说明和上传图片',
						duration:2000,
						icon:'none'
					})
				}else{
					let _this = this
					uni.showModal({
						title: '提示',
						content: '是否确定提交本次任务？',
						success: function(res) {
							let files = _this.filesupload.map(file=>{
								return file.id
							})
							executeTask({
								files,
								"meetingTaskId": _this.meetingTaskId,
								taskContent:_this.taskContent 
							}).then(res=>{
								uni.showToast({
									title:"提交成功",
									duration:2000,
									success: () => {
										uni.navigateBack({
											delta:1,
											success:()=>{
												let page = getCurrentPages().pop(); //跳转页面成功之后
												if (!page) return;
												page.onLoad(); //如果页面存在，则重新刷新页面
												}
										})
									}
								})
							})
							
						},
					})
				}
				
			},
			// 获取上传状态
			chooseImg(){
				let _this = this
				uni.chooseImage({
					count:5-_this.filesupload.length,
					success:(res)=>{
						let parma = [];
						console.log(res)
						res.tempFilePaths.forEach((e, index) => {
							parma.push({
								name: "files",
								file: res.tempFiles[index],
								url: e,
							})
						})
						let token = uni.getStorageSync("AuthToken");
						uni.uploadFile({
							url: '/api/uploadMultipleFiles', //仅为示例，非真实的接口地址
							name: 'files',
							files: parma,
							header: {
								'x-access-token': token
							},
							success: (uploadFileRes) => {
								console.log(JSON.parse(uploadFileRes.data).data)
								_this.filesupload.push(...(JSON.parse(uploadFileRes.data)
									.data)) //添加
							},
							fail: res => {
								console.log(res)
							}
						});
					},
					fail: (res) => {
						console.log(res)
					},
				})
			}
		},
		components: {
			myHeader
		},
	}
</script>

<style scoped lang="scss">
	@import url("/static/party_building/assets/style/federation.css");

	/**
	 * 定义按钮样式
	 */
	@mixin button-commit {
		background: linear-gradient(180deg, #ff5e59, #e20909);
		color: #fff;
	}

	/deep/ uni-button {
		@include button-commit;
	}
	
	.body{
		.headerbutton{
			width: 100%;
			height: 100%;
		}
		/deep/ .uni-grid{
			.uni-grid-item{
				width: 120upx !important;
				height: 120upx !important;
				margin: 1%;
				span{
					width: 20px;
					height: 20px;
					background-color: #e20909;
					color: #FFF;
					text-align: center;
					border-radius: 50%;
					position: absolute;
					position: absolute;
					right: 1px;
				}
				uni-image{
				width: 120upx;
				height: 120upx;
				}
			}
		}
	}
</style>
